<script setup lang="ts">
import createPanZoom from "panzoom";
import { onMounted } from "vue";

defineProps<{ svgUrl: string }>()
onMounted(() => {
    const selector: HTMLElement = document.getElementById("svg") as HTMLElement;
    const panZoom = createPanZoom(selector);
    panZoom.smoothZoom(10, 300, 1);

});
</script>
<template>
    <div class="svg">
        <div id="svg">
            <img :src="svgUrl" class="logo" v-if="svgUrl != ''">

        </div>

    </div>
</template>

<style scoped>
.svg {
    height: calc(100%);
    width: 100%;
    overflow: scroll;
    text-align: center;
    justify-content: center;
}

.logo {
    width: 100%;
    margin: 40px 20px;
    will-change: filter;
    transition: filter 300ms;
}
</style>
